<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-header">
            <div class="icon-wrapper blue">
              <el-icon><User /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">New Visits</div>
              <div class="data-value">102,400</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-header">
            <div class="icon-wrapper green">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">Messages</div>
              <div class="data-value">81,212</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-header">
            <div class="icon-wrapper yellow">
              <el-icon><Money /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">Purchases</div>
              <div class="data-value">9,280</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-header">
            <div class="icon-wrapper red">
              <el-icon><ShoppingCart /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">Shoppings</div>
              <div class="data-value">13,600</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="chart-section">
      <el-card class="chart-card">
        <div ref="lineChart" class="chart"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { User, ChatDotRound, Money, ShoppingCart } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import service from '@/request/request'

const lineChart = ref(null)

function abc(){
  service({
        url: "/user/test",
      method: "GET",
      }).then((res)=>{
        console.log(res.data);
      })
}
abc()

onMounted(() => {
  const chart = echarts.init(lineChart.value)
  
  const option = {
    title: {
      text: '周访问量统计'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['预期', '实际']
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '预期',
        type: 'line',
        smooth: true,
        data: [100, 120, 161, 134, 105, 160, 165],
        itemStyle: {
          color: '#ff6b81'
        }
      },
      {
        name: '实际',
        type: 'line',
        smooth: true,
        data: [80, 82, 91, 154, 162, 140, 145],
        itemStyle: {
          color: '#2ed573'
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  window.addEventListener('resize', () => {
    chart.resize()
  })
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.data-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.icon-wrapper :deep(.el-icon) {
  font-size: 24px;
  color: #fff;
}

.blue {
  background-color: #409EFF;
}

.green {
  background-color: #67C23A;
}

.yellow {
  background-color: #E6A23C;
}

.red {
  background-color: #F56C6C;
}

.data-info {
  flex: 1;
}

.data-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.chart-section {
  margin-top: 20px;
}

.chart {
  height: 400px;
  width: 100%;
}

:deep(.el-card) {
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>